<style lang="less">
.top_head{
	padding: 40rpx 30rpx 0;
	&>i{
		font-size: 35rpx;
	}
	&>view{
		font-size: 28rpx;
		margin: 0 0 0 220rpx;
		position: relative;
		&>text:nth-child(2){
			
				margin: 0 0 0 100rpx;
		}
		&>text:last-child{
			position: absolute;
			transition: all 0.8s;
			bottom: -15rpx;
			display: inline-block;
			width: 20%;
			height: 7rpx;
			background: #5ab3ff;
			left: 3%;
		}
	}
}
.botLine::after{
	content: '';
	display: inline-block;
	width: 60%;
	height: 7rpx;
	margin: 10rpx 0 0;
	background: #5ab3ff;
}
.add_fllow{
	height: 90rpx;
	padding: 0 30rpx;
	margin: 15rpx 0 0;
	&>text{
		font-size: 28rpx;
		color: #5ab3ff;
		display: flex;
		flex: 1;
		margin: 0 0 0 20rpx;
	}
}
.icon-jia{
	font-size: 50rpx;
		color: #5ab3ff;
}
.icon-right{
	font-size: 35rpx;
}
.slider{
	width: 100%;
	height: 20rpx;
	background: #F2F2F2;
}
.box_follow{
	padding: 0 30rpx;
}
.list_follow{
	border-bottom: 1px solid #EDEDED;
	padding: 20rpx 0;
	&>image{
		width: 120rpx;
		height: 120rpx;
		border-radius: 50%;
		margin: 0 15rpx 0 0;
	}
	.follow_info{
		display: flex;
		flex-direction: column;
		flex: 1;
	}
	.tags{
		width: 100rpx;
		font-size: 22rpx;
		color: #888;
		background: #F2F2F2;
		padding: 8rpx 0;
		border-radius: 10rpx;
	}
}
.name{
	font-size: 28rpx;
	font-weight: 500;
}
.desc{
	word-break: keep-all;
	width: 450rpx;
	font-size: 22rpx;
	text-overflow: ellipsis;
	overflow: hidden;
	margin: 15rpx 0 7rpx;
	color: #777;
}
.num{
	font-size: 22rpx;
	color: #999;
}
</style>

<template>
	<view>
			<view class="" :style="'height:' + statusBarHeight +'px'" ></view>
		<view class="top_head flex_v_venter">
			<i class='iconfont icon-zuo' @click='navBack'></i>
			<view class="flex_v_venter">
				<text @click="changeNav('3%')">关注</text>
				<text @click="changeNav('76%')">粉丝</text>
				<text :style="{left:lineLeft}"></text>
			</view>
		</view>
		<view class="add_fllow flex_v_venter">
			<i class='iconfont icon-jia'></i>
			<text>添加关注</text>
			<i class='iconfont icon-right'></i>
		</view>
		<view class="slider"></view>
		<view class="box_follow">
			<view class="list_follow flex_v_venter">
				<image src="../../static/img/cat.jpg" mode=""></image>
				<view class="follow_info">
					<view class="name">
						黑娃娃
					</view>
					<view class="desc">
						黑娃娃黑娃娃黑娃娃黑娃娃黑娃娃黑娃娃黑娃娃黑娃娃
					</view>
					<view class="num">
						粉丝:7.3w
					</view>
				</view>
				<view class="tags flex_center">
					已关注
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				lineLeft:'3%'
			};
		},
		methods:{
			changeNav(left){
				this.lineLeft = left
			},
			navBack() {
				uni.navigateBack()
			}
		}
	}
</script>

